<template>
  <section class="lbs-bg-transparent   lbs-bg-transparent2">
    <el-tooltip class="item" effect="dark" content="删除事件" placement="top-start">
     <el-button  type="danger" icon="el-icon-delete" size="mini" @click="removeHandler" :disabled="this.currentEvent==null||this.currentEvent.id==0"></el-button> </el-tooltip>
    <el-table :data="deviceMsgData.events" highlight-current-row @row-click="readEventMsg" @current-change="currentChange">
       <el-table-column width="120" property="deviceId" :label="$t('common.device')">
         <template slot-scope="scope">
            <i v-show="!scope.row.read" style="color:#FF4949"><font-awesome-icon icon="circle"/></i>
            <i v-show="scope.row.read">&nbsp;&nbsp;&nbsp;</i>
            <span class="name-width">{{$store.state.user.devices.list[$store.state.user.devices.index[scope.row.deviceId]].name}}</span>
          </template>
       </el-table-column>
       <el-table-column width="160" property="type" :label="$t('common.message')">
         <template slot-scope="scope">
            <el-tag
            size="small"
              :type="scope.row.type === 0?'danger':scope.row.type === 1?'success':scope.row.type === 2?'primary':'warning'"
              close-transition>{{$t('map.'+$store.state.user.status[scope.row.type]) }}</el-tag>
              <el-tag  size="mini" type="primary" v-show="scope.row.geoName">{{scope.row.geoName}}</el-tag>
          </template>
       </el-table-column>
      <el-table-column width="140" property="time" :label="$t('common.time')" :formatter="dateFormat"></el-table-column>


    </el-table>
      <el-pagination
    small
    :background="true"
    layout="prev, pager, next"
    :current-page="deviceMsgData.page"
    @current-change="handleCurrentChange"
    :total="deviceMsgData.total">
    </el-pagination>
    </section>
    </template>
<script>

import util from '@/utils/util';
import {getEvents,readEvent,deleteEvent } from '@/api/api';
export default {


	data() {
			return {
					deviceMsgData:{},
          currentEvent:{
            id:0
          }
			}
		},
		methods: {
			init(){
				this.getEvents();
			},
      getEvents(){
          let params = {
						page: this.deviceMsgData.page,
					}
					getEvents(params).then((data) => {
								this.deviceMsgData = data;
                this.$store.dispatch('getEvents', []);
                let alarms = []
                data.events.forEach(event => {

        					if(event.latitude){
                    alarms.push({
                      id:event.id,
                      coord:[event.longitude,event.latitude],
                      color:event.read?'255, 215, 0':'255, 0, 0',
                      visible:true
                    });
                  }
        				});
            // console.log(alarms);
                this.$store.dispatch('getEvents', alarms);
						});

			},
      //时间格式化
     dateFormat:function(row, column) {
              var date = row[column.property];
             if (date == undefined) {
                return "";
             }
             return util.dateFormat(date,"MM-DD HH:mm:ss");
        },
        getDeviceName:function(row, column) {
                 var deviceId = row[column.property];
               if (deviceId == undefined) {
                  return "";
               }
               return this.$store.state.user.devices.list[this.$store.state.user.devices.index[deviceId]].name;
          },
          handleCurrentChange(val){
            this.deviceMsgData.page = val
            this.getEvents();
          },
      readEventMsg(row, event, column){
        if(!row.read){
            readEvent(row.id).then((res) => {

                 row.read=true;
                 this.$store.dispatch('setMessageValue', {key:'eventCount',value:this.$store.state.user.message.eventCount-1});


            });
        }
        if(row.latitude){
          	this.$store.dispatch('setMapValues',[{key:'center',value:[row.longitude,row.latitude]},{key:'zoom',value:18}]);
        }

      },
			removeHandler(){
					 if(this.currentEvent.id){
             deleteEvent(this.currentEvent.id).then((data) => {
                  this.getEvents();
                  this.currentEvent={}
              });
          }
			},
      currentChange(currentRow, oldCurrentRow){
        this.currentEvent = currentRow;
      }

		},
		 watch: {
			'visible': function() {
		    	if(this.visible){
		    		this.init()
		    	}else{
              this.$store.dispatch('getEvents', []);
          }
		    }
		  },
		mounted() {

		},

		props: ['visible']
}
</script>
<style>
 .el-table .read-row {
    background: #EFF2F7;
  }
  .name-width{overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
</style>
